<template>
  <div class="get_more">
    <input
      v-model="phone"
      class="more-input"
      type="text"
      placeholder="请输入手机号码" />
    <button
      @click="handleClick"
      class="btn btn-primary more-btn"
      type="button">立即获取</button>
  </div>
</template>

<script>
  /**
   * @Author: lifuzhao
   * @Date: 2019-05-06
   * @Project: eabax
   */
  import Bus from './event-bus'
  export default {
    name: 'get-more',
    props: {
      type: {
        type: String,
        default: ''
      }
    },
    data(){
      return {
        phone: '',
        visible: true,
        loading: false
      }
    },
    computed: {

    },
    methods: {
      handleClick(){
        Bus.$emit('get-more', {
          phone: this.phone,
          type: this.type
        })
      },

    }
  }
</script>

<style lang="less">
  .get_more{
    width: 853px;
    height: 80px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #fff;
    border-radius: 40px;
    overflow: hidden;
    position: relative;
    .more-input{
      flex-shrink: 1;
      flex-grow: 1;
      height: 100%;
      border: 0;
      font-size: 16px;
      padding: 0 20px 0 40px;
    }
    .more-btn{
      flex-shrink: 0;
      flex-grow: 0;
      height: 100%;
      background-color: #0c68e6;
      padding: 0 47px;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }
</style>
